<template>
    <div class="container">
        <mt-header title="订单详情">
            <router-link to="/order" slot="left">
            <!-- 这里后面要返回home的所有订单的那个组件 -->
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>
        <router-link to="shop" style="text-decoration: none">
            <div class="shopName" v-if='msg.shopBase!=undefined'>{{msg.shopBase.shopName}}<span>></span></div>
        </router-link>
        <div class='bodyContainer' v-for="(item,index) in msg.foodDetails" :key="index">
            <div class="itema"><img :src="'/file'+item.foodUrl"></div>
            <div class="itemb"><span>{{item.foodName}}</span></div>
            <div class="itemc"><span class='right'>￥{{item.foodMoney/100}}</span></div>
            <div class="itemd"><span>×{{msg.shopCart[item['_id']]}}</span></div>
        </div>
        <div class="reductionContainer">
            <div>
                <span>包装费</span><span class='right'>￥{{msg.foodPack/100}}</span>
            </div>
            <div>
                <span>配送费</span><span class='right'>￥{{msg.distributionCost/100}}</span>
            </div>
            <div v-for="(item,index) in msg.preferential" :key='index'>
                <span class='box'>{{index}}</span>
                <span>使用{{index}}优惠</span>
                <span class="right red">-￥{{msg.preferential[index]/100}}</span>
            </div>
            <div class="sumContainer">
                <span class='right'>
                    <span>已优惠￥<span class='red'>{{msg.sumReduction}}</span></span>
                    <span>小计￥
                        <span style='font-weight: bold;font-size:1.4rem'>{{msg.sumCost/100}}</span>
                    </span>
                </span>
            </div>
        </div>
        <div class="sendAndOrder">
            <div>配送信息</div>
            <div><span>送达时间</span><span class='right'>{{msg.sendTime}}</span></div>
            <div><span>收获地址</span><span class='right' v-if="msg.addressDetails!=undefined">{{msg.addressDetails.address.name}}<br/>{{msg.addressDetails.name[0]}}({{sexList[msg.addressDetails.sex]}}){{msg.addressDetails.phoneName}}</span></div>
            <div>订单信息</div>
            <div><span>订单号</span><span class='right'>{{msg.orderId}}</span></div>
            <div><span>订单状态</span><span class='right'>{{tagList[msg.tag]}}</span></div>
            <div v-if="msg.tag==0"><span>支付方式</span><span class='right'>{{msg.buyWay}}</span></div>
            <div v-if="msg.tag==0"><span>骑手姓名</span><span class='right'>{{msg.knight}}</span></div>
            <div><span>下单时间</span><span class='right'>{{msg.getTime}}</span></div>
        </div>
    </div>
</template>
<script>
    import { mapMutations } from "vuex";
    export default({
        data(){
            return{
                cartFoods:[1,2,3],
                orderId:"",
                msg:{},
                tagList:{
                    '1':'已送达',
                    '0':'已支付',
                    '-1':'已取消'
                },
                sexList:['','先生','女士']
            }
        },
        mounted(){
            this.initMessage();
        },
        methods:{
            ...mapMutations(['setShopId']),
            async initMessage(){
                this.orderId=this.$route.params.orderId;
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                let postData={
                    orderId:this.orderId
                }
                await this.getRequest('/order/getOrder',postData,tokenStr).then(response=>{
                    if(response.code==200){
                        this.msg=response.obj;
                        this.msg.orderId=this.msg.orderId.slice(6);
                        this.setShopId(this.msg.shopBase.shopid);
                    }
                })
            }
        }
    })
</script>
<style lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
    @import '../style/mixin';
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        background-color:#f1f1f1;
    }
    .shopName{
        background-color: #fff;
        padding:0.3rem 0 0.3rem 0.5rem;
        @include font-size-color(1.1rem,#000);
        font-weight: bold;
        span{
            padding-left: 0.5rem;
            @include font-size-color(1.1rem,#666);
        }
    }
    .bodyContainer{
        margin-top:0.1rem;
        padding-left: 0.3rem;
        background-color: #fff;
        @include width-height(100%,4rem);
        display: grid;
        grid-template-rows: 50% 50%;
        grid-template-columns: 20% 60% 20%;
        grid-template-areas: "a b c"
                             "a d d";
        div{
            margin:0.3rem 0 0.3rem 0;
        }
        span{
            @include font-size-color(1rem,#666);
        }
        .itema{
            grid-area: a;
            img{
                @include width-height(50px,50px);
                border-radius: 0.5rem;
                padding-left: 0.9rem;
            }
        }
        .itemb{
            grid-area: b;
        }
        .itemc{
            grid-area: c;
            .right{
                position: absolute;
                right: 1rem;
            }
        }
        .itemd{
            grid-area: d;
        }
    }
    .reductionContainer{
        width:100%;
        background-color: #fff;
        div{
            position: relative;
            margin:0.2rem 0 0.5rem 0.3rem;
            padding-top: 0.5rem;
        }
        .right{
            position: absolute;
            right: 0.5rem;
        }
        .box{
            background-color: rgb(250, 60, 60);
            @include font-size-color(1rem,#fff);
            padding:0 0.3rem 0 0.3rem;
            border-radius: 0.5rem;
            margin-right: 0.5rem;
        }
        .red{
            @include font-size-color(1rem,rgb(250, 60, 60));
        }
    }
    .sumContainer{
        @include width-height(100%,2.5rem);
    }
    .sendAndOrder{
        background-color: #fff;
        position: relative;
        div{
            @include width-height(100%,2.5rem);
            padding: 1rem 0 0 0.5rem;
            border-bottom: 1px solid #f1f1f1;
        }
        span{
            @include font-size-color(1rem,#666);
        }
        .right{
            position: absolute;
            right: 0.5rem;
        }
    }
</style>